<template>
  <view class="set-view">
    <!-- 提示信息弹窗 -->
    <uni-popup ref="message" type="message">
      <uni-popup-message :type="data.msgType" :message="data.messageText" :duration="2000"></uni-popup-message>
    </uni-popup>
    
    <view class="reg-tag">
        <view class="trip-index"></view>
        设置密码
      </view>
      <!-- 初始密码和确认密码输入 -->
      <view>
        <view class="input-box">
          <input v-model="data.initPwd" :password=!data.showInitPwd class="l-input" placeholder="初始密码"/>
          <view @click="changeInitPwd">
            <uni-icons v-if="data.showInitPwd==true" type="eye" size="30"></uni-icons>
            <uni-icons v-else type="eye-slash" size="30"></uni-icons>
          </view>
        </view>
        <view class="input-box">
          <input v-model="data.rePwd" :password=!data.showRePwd class="l-input" placeholder="确认密码"/>
          <view @click="changeRePwd">
            <uni-icons v-if="data.showRePwd==true" type="eye" size="30"></uni-icons>
            <uni-icons v-else type="eye-slash" size="30"></uni-icons>
          </view>
        </view>
      </view>
      
      
      <!-- 登录按钮 -->
      <view class="reg-act-box">
        <button class="s-button" @click="confirm">确认</button>
      </view>
    </view>
    
</template>

<script setup>
import { reactive, ref,toRefs,onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app'
import helper from '../../common/helper';

const data = reactive({
  mailAccount:"",
  initPwd:"",
  rePwd:"",
  showInitPwd:false,
  showRePwd:false,
  msgType:"",
  messageText:"",
  work:"注册"
});

onLoad((options)=>{
  console.log(options)
  data.mailAccount = options.mailAccount
  data.work = options.work
})

const message = ref(null)

function messageToggle(type,text) {
  data.msgType = type
  data.messageText = text
  message.value.open()
}

function changeInitPwd() {
    data.showInitPwd = !data.showInitPwd;
}

function changeRePwd() {
    data.showRePwd = !data.showRePwd;
}

function confirm(){
  console.log("确认")
  if(data.initPwd != null && data.initPwd.trim() != "" && data.rePwd != null && data.rePwd.trim() != ""){
    if(data.initPwd != data.rePwd){
      messageToggle("info","密码不一致!")
      return
    }
    console.log(data.mailAccount)
    if(data.work == "注册"){
      regUser()
    }else if(data.work == "重置密码"){
      reSetPwd()
    }
  }
}

function regUser(){
  uni.request({
      url: helper.webUrl+'/user/regUser', 
      method:'POST',
      header: {
          'Content-Type': 'application/x-www-form-urlencoded' //自定义请求头信息
      },
      data: {
        mailAccount: data.mailAccount,
        password:data.rePwd
      },
      success: (res) => {
        console.log(res.data);
        if(res.data.code == 200){
          messageToggle("success",res.data.msg)
          uni.navigateBack({
          	delta: 2
          });
        }else{
          messageToggle("info",res.data.msg)
        }
      },
      fail: (err) => {
        console.error('请求失败:', err);
      }
  });
}

function reSetPwd(){
  uni.request({
      url: helper.webUrl+'/user/reSetPwd', 
      method:'POST',
      header: {
          'Content-Type': 'application/x-www-form-urlencoded' //自定义请求头信息
      },
      data: {
        mailAccount: data.mailAccount,
        password:data.rePwd
      },
      success: (res) => {
        console.log(res.data);
        if(res.data.code == 200){
          messageToggle("success",res.data.msg)
          uni.navigateBack({
          	delta: 2
          });
          uni.removeStorageSync("curUser")
        }else{
          messageToggle("info",res.data.msg)
        }
      },
      fail: (err) => {
        console.error('请求失败:', err);
      }
  });
}
</script>

<style>
.set-view{
  width: 100vw;
  height: 100vh;
  background-color: #f4f4f4;
}
.reg-tag{
  font-size: 25px;
  padding: 20px;
  display: flex;
  align-items: center;
}
.trip-index{
  width:5px;
  height: 25px;
  background-color: #89C0FF;
  margin-right: 10px;
}
.input-box{
  width: 80%;
  height: 45px;
  display: flex;
  align-items: center; /* 垂直居中 */
  margin-inline: auto;
  border-radius: 10px;
  background-color: #fff; 
  margin-top: 15px;
}
.l-input{
 margin-left: 2%;
 width: 100%;
 height: 100%;
}
.uni-icon {
  font-family: uniicons;
  font-size: 24px;
  font-weight: normal;
  font-style: normal;
  width: 24px;
  height: 24px;
  line-height: 24px;
  color: #999999;
}

.uni-eye-active {
  color: #007AFF;
}
.reg-act-box{
  display: flex;
  width: 90%;
  margin-inline: auto;
}
.s-button{
  width: 45%;
  background-color: #89C0FF;
  color: #fff;
  font-size: 16px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}      
</style>
